<template>
    <div>
        这是插槽
        <slot></slot>

        <div class="div">
            动态css
            <button @click="changeColor">变颜色</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// const style = ref('pink');
const style = ref({
    color: 'red'
});
// 动态修改css样式
const changeColor = () => {
    style.value.color = 'pink'
}
</script>

<style scoped>
/* 样式穿透： vue3中使用 :deep() */

/* 插槽选择器 : 可以设置插槽里的样式*/
:slotted(.a) {
    color: red;
}

/* 动态css , 绑定 响应式的参数， 在js中修改值 */
.div{
    /* color: v-bind(style); */
    color: v-bind('style.color');       /* 当响应值为对象时， 需要加 引号 '' 引用 */
}
</style>